<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>谷歌一下，你就知道</title>
    <link rel="stylesheet" href="./public.css">
    <div id="样式">
        <style>
            * {
                color: darkolivegreen;
                font-size: 44px;
            }
        </style>
        <style>
            span {
                color: darkorchid;
                font-size: 66px;
            }
        </style>
        <style>
            h3 {
                color: red;
                font-size: 40px;
            }

            h2 {
                color: cornflowerblue;
                font-size: 40px;
            }
        </style>
        <style>
            p {
                color: bisque;
                font-size: 55px;
            }
        </style>
    </div>
</head>

<body>
    <div id="第一个网站">Hello,world!</div>
    <div id="标题的段落">
        <h1 align="left">一级标题</h1>
        <h2 align="center">二级标题</h2>
        <h3 align="right">三级标题</h3>
        <h4 id="text">四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        <p>我是一个段<br>落标签</p>
    </div>
    <div id="下划线">
        <hr color="red" width="300px" size="20px" align="right">
        <hr color="green" width="300px" size="20px" align="center">
        <hr color="blue" width="300px" size="20px" align="left">
    </div>
    <div id="圖片">
        <img src="屏幕截图 2025-09-13 214444.png" alt="huroha" width="1400px" title="huroha">
        <img src="https://img-s.msn.cn/tenant/amp/entityid/AA1O3VnX.img?w=640&h=370&m=6&x=194&y=114&s=99&d=99">
    </div>
    <div id="超鏈接">
        <a href="https://aka.ms/AnaheimRW/ad6-douyin-cid116-pid2/sept24">
            <img src="屏幕截图 2025-09-13 214444.png" width="100">
        </a>
    </div>
    <div id="字体">
        <em class="csssd">em你好</em>
        <b>b你好</b>
        <i>i你好</i>
        <strong>strong你好</strong>
        <del>del你好</del>
        <span>span你好</span>
    </div>
    <div id="列表">
        <ol type="i">
            <li class="csssd">苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            <li>火龙果</li>
            <li>芒果</li>
        </ol>
        <ol type="I">
            <li>苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            <li>火龙果</li>
            <li>芒果</li>
        </ol>
        <ol type="a">
            <li>苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            <li>火龙果</li>
            <li>芒果</li>
        </ol>
        <ol type="A">
            <li>苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            <li>火龙果</li>
            <li>芒果</li>
        </ol>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            <li>火龙果</li>
            <li>芒果</li>
        </ol>
        <ol>
            <li>
                蔬菜
                <ol>
                    <li>白菜</li>
                    <li>包菜</li>
                    <li>芹菜</li>
                </ol>
            </li>
            <li>水果</li>
            <li>肉类</li>
        </ol>
        <ul type="disc">
            <li>苹果</li>
            <li>香蕉</li>
            <li>火龙果</li>
            <li>芒果</li>
            <li>橘子</li>
        </ul>
        <ul type="circle">
            <li>苹果</li>
            <li>香蕉</li>
            <li>火龙果</li>
            <li>芒果</li>
            <li>橘子</li>
        </ul>
        <ul type="square">
            <li>苹果</li>
            <li>香蕉</li>
            <li>火龙果</li>
            <li>芒果</li>
            <li>橘子</li>
        </ul>
        <ul type="none">
            <li>苹果</li>
            <li>香蕉</li>
            <li>火龙果</li>
            <li>芒果</li>
            <li>橘子</li>
        </ul>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>火龙果</li>
            <li>芒果
                <ul>
                    <li>芒果皮</li>
                    <li>果肉</li>
                    <li>芒果核</li>
                </ul>
            </li>
            <li>橘子</li>
        </ul>
        <ul>
            <li>苹果</li>
            <li>华为</li>
            <li>小米</li>
            <li>vivo</li>
            <li>oppo</li>
            <li>三星</li>
        </ul>
    </div>
    <div id="表格">
        <table border="1">
            <tr>
                <td class="csssd">发额</td>
                <td>掉分</td>
                <td>而奋斗</td>
                <td>掉分</td>
            </tr>
            <tr>
                <td>合法</td>
                <td>光和热啊</td>
                <td>egghead</td>
                <td>儿童地方</td>
            </tr>
            <tr>
                <td>丰富的</td>
                <td>丰富</td>
                <td>如果法国人</td>
                <td class="csssd">搞定撒</td>
            </tr>
            <tr>
                <td>哥哥</td>
                <td>九狗</td>
                <td>如果的撒</td>
                <td>过如果</td>
            </tr>
        </table>
        <table border="1" width="400px" height="400px">
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
        </table>
        <table border="1" width="900px">
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
                <td>单元格5</td>
            </tr>
            <tr>
                <td colspan="2">单元格6 7</td>
                <td>单元格8</td>
                <td>单元格9</td>
                <td>单元格10</td>
            </tr>
            <tr>
                <td>单元格11</td>
                <td>单元格12</td>
                <td>单元格13</td>
                <td>单元格14</td>
                <td rowspan="2">单元格15 20</td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">单元格16,17,21,22</td>
                <td>单元格18</td>
                <td>单元格19</td>
            </tr>
            <tr>
                <td>单元格23</td>
                <td>单元格24</td>
                <td>单元格25</td>
            </tr>
        </table>
    </div>
    <div id="表单">
        <form>
            <input>
            <input type="submit">
        </form>
        <form>
            用户名：<input type="text">
            密码：<input type="password">
            <input type="submit" value="登录">
        </form>
    </div>
    <div id="块级元素与内联元素">
        <table border="1">
            <tr>
                <td>块级元素</td>
                <td>内联元素</td>
            </tr>
            <tr>
                <td>块元素会在页面中独占一行（自上而下垂直排列）</td>
                <td>行内元素不会独占页面中的一行，只占自身的大小</td>
            </tr>
            <tr>
                <td>可以设置width，height属性</td>
                <td>行内元素设置width，height属性无效</td>
            </tr>
            <tr>
                <td>一般块级元素可以包含行内元素和其他块级元素</td>
                <td>一般内联元素包含内联元素不包含块级元素</td>
            </tr>
        </table>
    </div>
    <div id="div">
        <h1>标题</h1>
        <p>段落</p>
        <ul>
            <li>反对</li>
            <li>烦的</li>
            <li>好</li>
        </ul>
    </div>
    <div id="内联样式">
        <p style="color: aquamarine;font-size: 55px;">我是内联样式的方案</p>
        <p>学完<span>前端</span>，学java！！！</p>
    </div>
    <div id="选择器">
        <table border="1">
            <tr>
                <td>元素选择器的权重</td>
                <td>class选择器的权重</td>
                <td>id选择器的权重</td>
                <td>内联样式的权重</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">10</td>
                <td align="center">100</td>
                <td align="center">1000</td>
            </tr>
        </table>
        <p style="color: darkmagenta;font-size: 30px;">
            优先级从高到低:行内样式(直接在标签里面写style)>id选择器(id=,#)>类选择器(class=,.)>元素选择器(标签名称)</p>
    </div>
    <div id="字体属性">
        <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color:deeppink;">airball
        </p>
    </div>
    <div id="背景属性">
        <p class="box1">wdf,又一个三分球</p>
        <p class="box2" style="color=red">来来来，看我库里表演</p>
    </div>
</body>


</html>